<template>
  <el-container direction="vertical">
    <el-header>
      <div>
        <page-header/>
      </div>
    </el-header>
    <el-main>
      <div id="root">
        <div id="left-box">
          <el-card>
            <el-row>
              <el-col id="ep-details">
                <div>账号: {{ currentUser.userId }}</div>
                <el-divider/>
                <div>用户名: {{ currentUser.userName }}</div>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-row>
              <el-col>
                <div>试卷名称: {{ examPaper[0].examPaper.name }}</div>
                <el-divider/>
                <div>学科名称: {{ examPaper[0].subject.name }}</div>
                <el-divider/>
                <div>总分：{{ examPaper[0].examPaper.score }} 分 时长： {{ examPaper[0].examPaper.suggestTime }} 分钟
                </div>
                <el-divider/>
                <div>
                  <el-button type="primary" @click="submitPaper">提交试卷</el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
        <div id="right-box">
          <el-card>
            <el-row>
              <el-col>
                <div id="question-box" v-for="(item, index) in questionItems" :key="index">
                  <div>{{ index + 1 }}. {{ item.question.content.replace(/#/g, '____') }}</div>

                  <div class="answer-box">
                    <!--选项题-->
                    <div v-if="item.questionOptions.length !== 0">
                      <div v-if="item.question.questionType !==2">
                        <el-radio-group v-model="item.customerAnswer"
                                        @change="collectAnswer(item)">
                          <div v-for="options in item.questionOptions" :key="options.order">
                            <el-radio
                              :label="transNumber(options.order)">
                              {{ transNumber(options.order) }}. {{ options.content }}
                            </el-radio>
                          </div>
                        </el-radio-group>
                      </div>

                      <div v-if="item.question.questionType === 2">
                        <el-checkbox-group v-model="multipleAnswers"
                                           @change="collectArrayAnswer(item)"
                        >
                          <div v-for="options in item.questionOptions" :key="options.order">
                            <el-checkbox
                              :label="transNumber(options.order)">
                              {{ transNumber(options.order) }}. {{ options.content }}
                            </el-checkbox>
                          </div>
                        </el-checkbox-group>
                      </div>
                    </div>
                  </div>

                  <div v-if="item.questionOptions.length === 0">
                    <div v-if="item.question.questionType === 4" class="answer-box">
                      <div v-for="n in (item.question.content.split('#').length -1)" :key="n">
                        第{{ n }}空
                        <el-input @blur="collectAnswer(item)" v-model="item.customerAnswer"/>
                      </div>
                    </div>

                    <div v-if="item.question.questionType === 5" class="answer-box">
                      <el-input type="textarea" @blur="collectAnswer(item)" v-model="item.customerAnswer"/>
                    </div>
                  </div>
                  <el-divider/>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import Main from "@/layouts/Main.vue";
import PageHeader from "@/layouts/header/PageHeader.vue";
import {mapActions, mapState} from "vuex";

export default {
  name: "Exam",
  components: {PageHeader, Main},
  data() {
    return {
      multipleAnswers: [],
      examPaperId: this.$route.params.examPaperId,
      examPaperName: this.$route.params.examPaperName,
    }
  },
  computed: {
    ...mapState(['currentUser']),
    ...mapState('exam', ['questionItems', 'examPaper']),
  },
  mounted() {
    const examPaperValue = {
      examPaperId: this.examPaperId,
      examPaperName: this.examPaperName,
    };
    this.modifyExamPaper(examPaperValue);
    this.modifyQuestionItems(this.examPaperId);
    this.initAnswerPaperDetail();
  },
  methods: {
    ...mapActions('exam', ['modifyQuestionItems', 'modifyExamPaper']),
    transNumber(num) {
      let str = '';
      switch (num) {
        case 1:
          str = 'A';
          break;
        case 2:
          str = 'B';
          break;
        case 3:
          str = 'C';
          break;
        case 4:
          str = 'D';
          break;
      }
      return str;
    },
    initAnswerPaperDetail() {
      this.getAnswerPaperDetail();
    },
    getAnswerPaperDetail() {
      const url = "/student/exam/first";
      const initialData = {
        examPaperId: this.examPaperId,
        userId: this.currentUser.userId,
      }
      this.axios.post(url, initialData).then(resp => {
        this.$message({
          message: '开始考试',
          type: "success",
          center: true,
        })
      });
    },
    collectAnswer(item) {
      const subData = {
        questionId: item.question.id,
        examPaperId: this.examPaperId,
        customerAnswer: item.customerAnswer,
        userId: this.currentUser.userId,
      }
      this.submitItem(subData);
    },
    collectArrayAnswer(item) {
      const subData = {
        questionId: item.question.id,
        examPaperId: this.examPaperId,
        customerAnswer: this.multipleAnswers.join(),
        userId: this.currentUser.userId,
      }
      this.submitItem(subData);
    },
    submitItem(subData) {
      const url = "/student/exam/answer/items";
      this.axios.post(url, subData).then(resp => {
      });
    },
    submitPaper() {
      this.$confirm('确定提交试卷?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确认
        this.$router.push({name: 'Home'});
        this.$message({
          message: '交卷成功',
          type: 'success',
          center: true
        })
      }).catch(() => {
        // 点击取消
      });
    }
  },
}
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.el-main {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

#root {
  display: flex;
}

#left-box {
  .el-card {
    margin: 20px;
  }

  div {
    font-weight: bold;
    margin: 10px;
  }
}

#right-box {
  flex-grow: 1;
  margin: 20px;
}

#question-box {
  margin: 0 4em;

  div {
    margin: 1em 0;
  }

  .answer-box {
    margin-left: 2em;
  }
}

.el-radio {
  margin: 1em 0;
}

.el-checkbox {
  margin: 1em 0;
}

</style>